<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		 <!-- #ifdef H5 -->
		<view class="header">
			<view class="back-btn" @click="toLogin()">
				<view class="back-icon"></view>
			</view>
			<text class="title">主页</text>
			<view class="settings-btn">
				<text class="settings-dot"></text>
				<text class="settings-dot"></text>
				<text class="settings-dot"></text>
				<view class="settings-circle"></view>
			</view>
		</view>
		<!-- #endif -->
		
		<!-- 商店信息 -->
		<view class="shop-info">
			<view class="shop-avatar" @click="toInfor()">
				<image :src="merchantInfo.front" mode="aspectFill"></image>
			</view>
			<text class="shop-name">{{shanghuinfo.name}}，欢迎您</text>
		</view>
		
		<!-- 核销功能区 -->
		<view class="verify-area">
			<view class="verify-item" @click="toCheckImg()">
				<view class="verify-icon">
					<view class="scan-icon"></view>
				</view>
				<text class="verify-text">扫码核销</text>
			</view>
			<view class="divider"></view>
			<view class="verify-item" @click="toCheckCode()">
				<view class="verify-icon">
					<view class="input-icon"></view>
				</view>
				<text class="verify-text">输入核销码</text>
			</view>
		</view>
		
		<!-- 功能菜单区 -->
		<view class="function-menu">
			<view class="function-row">
				<view class="function-item" v-for="(item, index) in rowOne" :index="index" :key="index" @click="navigateTo1(index)">
					<view :class="item.class">
						<image :src="item.image" style="width: 30rpx; height: 30rpx;"></image>
					</view>
					<text class="function-text">{{item.name}}</text>
				</view>
			</view>
			
			<view class="function-row">
				<view class="function-item" v-for="(item, index) in rowTwo" :index="index" :key="index" @click="navigateTo2(index)">
					<view :class="item.class">
						<image :src="item.image" style="width: 30rpx; height: 30rpx;"></image>
					</view>
					<text class="function-text">{{item.name}}</text>
				</view>
			</view>
			
			<view class="function-row">
				<view class="function-item" v-for="(item, index) in rowThere" :index="index" :key="index" @click="navigateTo3(index)">
					<view :class="item.class">
						<image :src="item.image" style="width: 30rpx; height: 30rpx;"></image>
					</view>
					<text class="function-text">{{item.name}}</text>
				</view>
			</view>
		</view>
		
		<!-- 最新通知区 -->
		<view class="notification-area">
			<view class="notification-header">
				<view class="notification-title">
					<text class="iconfont icon-bell notification-icon-bell"></text>
					<text>最新通知</text>
				</view>
				<view class="notification-more" @click="viewAllNotifications">
					<text>今日需上门取车任务共32单</text>
					<text class="arrow-icon">›</text>
				</view>
			</view>
			
			<!-- 通知列表 -->
			<view class="notification-list">
				<view class="notification-item" v-for="(item, index) in notificationList" :key="index">
					<text class="customer-name">{{ item.customer.nickName}}</text>
					<text class="service-name">维修汽车 </text>
					<text class="service-time">{{ item.reservationTime}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {onLoad} from '@dcloudio/uni-app'
	import { ref } from 'vue';
	import request from '../../utils/request';
	let userinfo=ref({})
	let shanghuinfo=ref({})
	const merchantInfo = ref({});
	const merchant = ref("");
	//获取商户信息
	function getMerchantInfo(){
		merchantInfo.value = uni.getStorageSync('userinfo');
		console.log("商户信息",merchantInfo.value);
      request({
		url:'merchant/merchant/'+merchantInfo.value.mid,
		method:'get',
		success(res){
			console.log("少时诵诗书",res.data.data.name);
              return merchant.value = res.data.data.name;
		},
		
	})
	}
	getMerchantInfo();
	onLoad(()=>{
		request({
			url:'merchant/verification/'+uni.getStorageSync("userinfo").id,
			method:'get',
			success(res){
				// console.log(res);
				userinfo.value=res.data.data
			},
			fail(res){
				console.log(res);
			}
		})
		// console.log(userinfo.value);
		request({
			url:'merchant/merchant/'+uni.getStorageSync("userinfo").mid,
			method:'get',
			success(res){
				// console.log(res);
				shanghuinfo.value=res.data.data
			},
			fail(res){
				console.log(res);
			}
		})
	})
	
	
	function toLogin(){
		uni.redirectTo({
			url:'/pages/login/login'
		})
	}
	
	function toInfor(){
	
	request({
		url:'merchant/imgs/'+userinfo.value.mid,
		method:'get',
		success(res){
			console.log(res);
			uni.navigateTo({
			  url: '/pages/index/storeInfor/storeInfor',
			  success: function(aa) {
			    // 通过eventChannel向被打开页面传送数据
			    aa.eventChannel.emit('acceptDataFromOpenerPage', { imgs: res.data.data ,userinfo:userinfo.value,shanghuinfo:shanghuinfo.value})
			  }
			})
		},
		fail(err){
			console.log(err);
		}
		
	})
	
	}
	
	
	function toCheckImg(){
		uni.navigateTo({
			url: '/pages/index/check/check'
		})
	}
	
	function toCheckCode(){
		uni.navigateTo({
			url: '/pages/index/checkCode/checkCode'
		})
	}
	
	
	const rowOne = ref([
		{
			name:'经营统计',
			image:'/static/tj.png',
			class:'function-icon blue'
		},
		{
			name:'核销记录',
			image:'/static/hxjl.png',
			class:'function-icon orange'
		},
		{
			name:'收支明细',
			image:'/static/sz.png',
			class:'function-icon purple'
		},
		{
			name:'订单管理',
			image:'/static/dd.png',
			class:'function-icon yellow'
		},
	])
	
	const rowTwo = ref([
		{
			name:'卡券管理',
			image:'/static/kq.png',
			class:'function-icon blue-light'
		},
		{
			name:'维修任务',
			image:'/static/wx.png',
			class:'function-icon green'
		},
		{
			name:'评价管理',
			image:'/static/pj.png',
			class:'function-icon pink'
		},
		{
			name:'商户资料',
			image:'/static/therebook.png',
			class:'function-icon cyan'
		},
	])
	
	const rowThere = ref([
		{
			name:'活动发布',
			image:'/static/hd.png',
			class:'function-icon orange-light'
		},
		{
			name:'救援中心',
			image:'/static/救援.png',
			class:'function-icon red'
		},
		{
			name:'',
			image:'',
			class:''
		},
		{
			name:'',
			image:'',
			class:''
		},
	])
	
	
	// 最新通知数据
	const notificationList = ref([]);
 let taskList = ref([])
 function getWeiXiuTask(){
		request({
			url:'evaluate/reservation/list',
			method:'get',
			data:{
				pageNum:1,
				pageSize:10000
			},
			success:(res=>{
			taskList.value = res.data.rows	
			// 使用 filter 方法过滤数组
			taskList.value = taskList.value.filter(  item =>
			item.merchantid === userinfo.value.id
		)
			console.log("过滤后的维修任务:",taskList.value);
			taskList.value=taskList.value.reverse()
            notificationList.value = taskList.value.slice(0, 5);
		})
	})

	}
	getWeiXiuTask()
	
	// 页面导航
	const navigateTo1 = (pageNum) => {
		if(pageNum==0){
			uni.showToast({
				title: `正在前往经营统计页面`,
				icon: 'none'
			});
			uni.navigateTo({
				url:'/pages/index/opst/opst'
			})
		}else if(pageNum==1){
			uni.showToast({
				title: `正在前往核销记录页面`,
				icon: 'none'
			});
			uni.navigateTo({
				url:'/pages/index/checkLog/checkLog'
			})
		}else if(pageNum==2){
			uni.showToast({
				title: `正在前往收支明细页面`,
				icon: 'none'
			});
			uni.navigateTo({
				url:'/pages/index/shouzhimingxi/shouzhimingxi'
			})
		}else if(pageNum==3){
			uni.showToast({
				title: `正在前往订单管理页面`,
				icon: 'none'
			});
			uni.navigateTo({
				url:'/pages/index/dingdanguanli/dingdanguanli'
			})
		}
		
	}
	
	const navigateTo2 = (pageNum) => {
		if(pageNum==0){
			uni.showToast({
				title: `正在前往卡券管理`,
				icon: 'none'
			});
			uni.navigateTo({
				url:'/pages/index/kaquan/kaquan'
			})
		}else if(pageNum==1){
			uni.showToast({
				title: `正在前往维修任务`,
				icon: 'none'
			});
			uni.navigateTo({
				url:'/pages/index/weixiurenwu/weixiurenwu'
			})
		}else if(pageNum==2){
			uni.showToast({
				title: `正在前往评价管理`,
				icon: 'none'
			});
			uni.navigateTo({
				url:'/pages/index/pingjia/pingjia'
			})
		}else if(pageNum==3){
			uni.showToast({
				title: `正在前往商户资料`,
				icon: 'none'
			});
			// uni.navigateTo({
			// 	url:'/pages/index/storeInfor/storeInfor'
			// })
			toInfor()
		}
	}
	
	const navigateTo3 = (pageNum) => {
		if(pageNum==0){
			uni.showToast({
				title: `正在前往活动发布`,
				icon: 'none'
			});
			uni.navigateTo({
				url:'/pages/index/huodong/huodong'
			})
		}else if(pageNum==1){
			uni.showToast({
				title: `正在前往救援中心`,
				icon: 'none'
			});
			uni.navigateTo({
				url:'/pages/index/rescueCenter/rescueCenter'
			})
		}
	}
	
	
	// 查看所有通知
	const viewAllNotifications = () => {
		uni.showToast({
			title: '查看所有通知',
			icon: 'none'
		});
	}
</script>

<style>
	@import "/static/customicons.css";
	/* @import "/common/app.css"; */
	
	/* 容器样式 */
	.container {
		padding: 0;
		font-size: 14px;
		line-height: 24px;
		background-color: #f5f5f5;
	}

	.back-btn{
		margin-left: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}
	
	.back-icon {
		width: 30px;
		height: 30px;
		/* position: relative; */
	}
	
	.back-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #fff;
		top: 50rpx;
		left: 27rpx;
		transform: translate(-50%, -50%);
	}
	
	.back-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-left: 2px solid #fff;
		border-bottom: 2px solid #fff;
		transform: rotate(45deg);
		top: 40rpx;
		left: 10rpx;
	}
	
	.title {
		margin-top: 20px;
		font-size: 24px;
		font-weight: bold;
		margin-left: -50rpx;
	}
	
	.settings-btn {
		margin-top: 20px;
		position: absolute;
		right: 15px;
		display: flex;
		align-items: center;
	}
	
	.settings-dot {
		width: 4px;
		height: 4px;
		background-color: #ffffff;
		border-radius: 50%;
		margin: 0 2px;
	}
	
	.settings-circle {
		width: 20px;
		height: 20px;
		border: 2px solid #ffffff;
		border-radius: 50%;
		margin-left: 5px;
	}
	
	/* 商店信息 */
	.shop-info {
		margin-top: -50px;
		width: 100%;
		height: 120px;
		display: flex;
		align-items: center;
		padding: 20px 15px;
		background-color: #2196F3;
		color: #ffffff;
	}
	
	.shop-avatar {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		overflow: hidden;
		background-color: #ffffff;
		margin-right: 15px;
	}
	
	.shop-avatar image {
		width: 100%;
		height: 100%;
	}
	
	.shop-name {
		font-size: 18px;
		font-weight: bold;
	}
	
	/* 核销功能区 */
	.verify-area {
		
		display: flex;
		margin:-40px  15px 0 15px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}
	
	.verify-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px 0;
	}
	
	.verify-icon {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 8px;
	}
	
	.scan-icon {
		width: 30px;
		height: 30px;
		border: 2px solid #2196F3;
		position: relative;
	}
	
	.scan-icon::before {
		content: "";
		position: absolute;
		width: 15px;
		height: 2px;
		background-color: #2196F3;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.scan-icon::after {
		content: "";
		position: absolute;
		width: 2px;
		height: 15px;
		background-color: #2196F3;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.input-icon {
		width: 30px;
		height: 30px;
		position: relative;
	}
	
	.input-icon::before {
		content: "";
		position: absolute;
		width: 20px;
		height: 2px;
		background-color: #2196F3;
		top: 70%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.input-icon::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 10px;
		border-right: 2px solid #2196F3;
		border-top: 2px solid #2196F3;
		transform: rotate(45deg);
		top: 53%;
		left: 40%;
	}
	
	.verify-text {
		font-size: 14px;
		color: #333;
	}
	
	.divider {
		width: 1px;
		background-color: #eee;
	}
	
	/* 功能菜单区 */
	.function-menu {
		margin: 15px;
		background-color: #ffffff;
		border-radius: 8px;
		padding: 15px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
	}
	
	.function-row {
		display: flex;
		margin-bottom: 20px;
	}
	
	.function-row:last-child {
		margin-bottom: 0;
	}
	
	.function-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.function-icon {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 8px;
		position: relative;
	}
	
	.blue { background-color: #03A9F4; }
	.orange { background-color: #FF9800; }
	.purple { background-color: #9C27B0; }
	.yellow { background-color: #FFC107; }
	.blue-light { background-color: #00BCD4; }
	.green { background-color: #4CAF50; }
	.pink { background-color: #FF4081; }
	.cyan { background-color: #00BCD4; }
	.orange-light { background-color: #FF9800; }
	.red { background-color: red; } 
	
	.badge {
		position: relative;
	}
	
	.badge-number {
		position: absolute;
		top: -5px;
		right: -5px;
		background-color: #FF0000;
		color: #ffffff;
		font-size: 10px;
		min-width: 16px;
		height: 16px;
		line-height: 16px;
		text-align: center;
		border-radius: 8px;
	}
	
	.function-text {
		font-size: 14px;
		color: #333;
	}
	
	/* 图标样式 - 使用iconfont */
	.iconfont {
		font-family: "customicons"; /* 项目使用的字体名称 */
		font-size: 24px;
		color: #ffffff;
	}
	
	.notification-icon-bell {
		color: #2196F3;
		margin-right: 5px;
	}
	
	/* 最新通知区 */
	.notification-area {
		margin: 15px;
		background-color: #ffffff;
		border-radius: 8px;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}
	
	.notification-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 15px;
		border-bottom: 1px solid #eee;
	}
	
	.notification-title {
		display: flex;
		align-items: center;
		color: #333;
		font-weight: bold;
	}
	
	.notification-more {
		display: flex;
		align-items: center;
		color: #ff5722;
		font-size: 12px;
	}
	
	.arrow-icon {
		margin-left: 5px;
		font-size: 16px;
	}
	
	.notification-list {
		padding: 0 15px;
	}
	
	.notification-item {
		display: flex;
		padding: 15px 0;
		border-bottom: 1px solid #eee;
	}
	
	.notification-item:last-child {
		border-bottom: none;
	}
	
	.customer-name {
		width: 150px;
		color: #333;
	}
	
	.service-name {
		flex: 1;
		color: #666;
	}
	
	.service-time {
		width: 120px;
		text-align: right;
		color: #999;
	}
	page {
	  font-size: 16px;
	}
</style>
